<%-- 
    Document   : profile
    Created on : Sep 16, 2011, 8:02:40 AM
    Author     : javierpanchi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html> 
    <head> 
        <title>Page Title</title> 

        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
        <link rel="stylesheet" href="/Drinkmeter/css/TabStyle.css">
        <script language="Javascript">
            function saveProfile(){
                if(document.getElementById('name').value.length>0 &&
                    document.getElementById('age').value.length>0 &&
                    document.getElementById('height').value.length>0 &&
                    document.getElementById('weight').value.length>0 &&
                    document.getElementById('address').value.length>0 &&
                    document.getElementById('mobile').value.length>0 &&
                    document.getElementById('emergency').value.length>0){
                    document.getElementById('form1').submit();
                }else{
                    alert('Please fill up \n all the form')
                }
        
            
            }
        </script>
    </head> 
    <body onload="timerCount('profile')">
        <form name="form1" id="form1" method="post" action="/Drinkmeter/General?opt=save">
            <div data-role="page">
                <div data-role="header">
                    <h1>Add Profile</h1>
                </div>
                <div data-role="content">
                    <div data-role="fieldcontain">
                        <label for="name">Name:</label>
                        <input type="text" class="required"  name="name" id="name" value="${param.nameFacebook}"  />
                    </div>	
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup" data-type="horizontal" >
                            <legend>Gender:</legend>
                            <input type="radio" name="gender" id="male" value="male" checked="checked" />
                            <label for="male">Male</label>
                            <input type="radio" name="gender" id="female" value="female"  />
                            <label for="female">Female</label>
                        </fieldset>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="age">Age:</label>
                        <input type="text" class="required"  name="age" id="age" value="${person.age}"  />
                    </div>	
                    <div data-role="fieldcontain">
                        <label for="height">Height(cm):</label>
                        <input type="text" class="required"  name="height" id="height" value="${person.height}"  />
                    </div>	
                    <div data-role="fieldcontain">
                        <label for="weight">Weight(kg):</label>
                        <input type="text" class="required"  name="weight" id="weight" value="${person.weight}"  />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="address">Address:</label>
                        <input type="text" class="required"  name="address" id="address" value="${person.address}"  />
                    </div>	
                    <div data-role="fieldcontain">
                        <label for="mobile">Mobile Number:</label>
                        <input type="text" class="required"  name="mobile" id="mobile" value="${person.phone}"  />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="emergency">Emergency Number:</label>
                        <input type="text" class="required"  name="emergency" id="emergency" value="${person.emphone}"  />
                        <input type="hidden" name="idFacebook" id="idFacebook" value="${param.idFacebook}"  />
                    </div>
                    <a href="javascript:saveProfile()" data-role="button">Save</a>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    </form>
                    <div style="top: 350.5px;" class="ui-loader ui-body-a ui-corner-all"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>

                    <footer>
                        <div id='tabbarcontainer'>
                            <ul id='tabbar'>
                                <div id="mensajes"></div>
                                <li class='tab'><a href="#" id='tab_home' onclick="window.location='/Drinkmeter'">Tab 1</a></li>
                                <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/General?opt=friends'" id='tab_friends'>Tab 2</a></li>
                                <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/jsp/drinks.jsp'" id='tab_drinks'>Tab 3</a></li>
                                <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/DrinksServlet?opt=report'" id='tab_stats'>Tab 4</a></li>
                                <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/jsp/leave.jsp'" id='tab_locations'>Tab 5</a></li>
                            </ul>
                        </div>
                        <script type='text/javascript'>
                            $('li.tab a').bind('click', function(event) {
                                $('li.tab a').removeClass('active');
                                $(event.target).addClass('active');
                            });
                        </script>
                    </footer>   
                </div>
            </div></body>
</html>